<script setup>
import * as echarts from "echarts";
import { ref, watchEffect } from "vue";

const data = [
  { name: "法律法规", value: 9 },
  { name: "地方性法规", value: 6 },
  { name: "国家部委规章", value: 82 },
  { name: "市政府规章", value: 3 },
  { name: "市政府规范性文件", value: 42 },
  { name: "市教委规范性文件", value: 130 },
];

const chartRef = ref(null);

watchEffect(() => {
  if (!chartRef.value) return;
  const chart = echarts.init(chartRef.value);
  const option = {
    legend: {
      itemWidth: 10,
      itemHeight: 10,
      itemGap: 8,
      bottom: "0%",
      left: "21%",
      orient: "vertical",
      textStyle: {
        fontSize: 12,
        fontWeight: "bold",
        color: "#FFFFFF",
        rich: {
          name: {
            color: "rgba(201,233,248,0.8)",
            fontSize: 10,
          },
        },
      },
      formatter: (e) => {
        let val = 0;
        data.forEach((el) => {
          if (e == el.name) val = el.value;
        });
        return `{name|${e}} ${val}`;
      },
    },
    title: [
      {
        text: `272{unit|个}`,
        x: "4%",
        y: "32%",
        textStyle: {
          fontFamily: "Helvetica-Bold",
          fontWeight: "bold",
          fontSize: 14,
          color: "#fff",
          rich: {
            unit: {
              fontSize: 12,
              color: "rgba(201,233,248,0.8)",
            },
          },
        },
      },
    ],
    color: ["#2D80FF", "#FEDE73", "#2DFFF8", "#B66DEA", "#93CBFF", "#F5852F"],
    series: [
      {
        type: "pie",
        radius: ["70%", "80%"],
        center: ["12%", "50%"],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: "center",
        },
        labelLine: {
          show: false,
        },
        data: data,
      },
    ],
  };
  chart.setOption(option);
});
</script>

<template>
  <div ref="chartRef" style="width: 100%; height: 100%"></div>
</template>
